import { GStyleSheet } from "@/utils/DarkMode";
import { Input, View, Image } from "@tarojs/components";
import { InputProps } from "@tarojs/components/types/Input";
import { FC, ReactNode } from "react";

const dstyle = GStyleSheet.create({
  container: {
    display: "flex",
    alignItems: "center",
    marginTop: "40rpx",
    position: "relative",
    paddingBottom: '28rpx',
    borderBottom: "1px solid rgba(0, 0, 0, .08)",
  },
  input: {
    flex: 1,
    // display: "flex",
    // alignItems: "center",
  },
  icon: {
    width: '48rpx',
    height: '48rpx',
    marginRight: '20rpx'
  },
  extra: {
    right: 0
  }
});

interface IProps extends InputProps {
  icon?: string;
  extra?: ReactNode;
}

const IconInput: FC<IProps> = ({ icon, extra, ...props }) => {
  const styles = dstyle.useDynamicStyle();

  return (
    <View style={styles.container}>
      {icon && <Image src={icon} style={styles.icon} />}
      <Input style={styles.input} {...props} />
      <View style={styles.extra}>{extra}</View>
    </View>
  );
};

export default IconInput;
